<template>
  <div class="container">
    <!-- <el-page-header @back="goBack" content="预定信息"> </el-page-header> -->
    <!-- <div class="submitButtom">
      <el-button
        type="primary"
        style="margin-left: 10%; width: 80%"
        @click="goBack"
        >确 定</el-button
      >
    </div> -->
    <!-- <div> -->
    <div class="TimeDiv">
      <!-- <el-divider >会议预定信息</el-divider> -->
      <el-date-picker
        style="margin-left: 3%; width: 44%"
        v-model="form.date"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        @change="changeDate"
        :clearable="false"
        :editable="false"
      >
      </el-date-picker>
    </div>
    <div class="TimeDiv">
      <div style="display: inline-block; margin-left: 3%; width: 44%">
        <el-select
          v-model="form.startTime"
          placeholder="起始时间"
          @change="changeStartTime"
        >
          <el-option
            v-for="item in startTimeList"
            :key="item.时间"
            :label="item.时间"
            :value="item.时间"
          >
          </el-option>
        </el-select>
      </div>
      <div style="display: inline-block; width: 6%; text-align: center">至</div>
      <div style="display: inline-block; width: 44%">
        <el-select v-model="form.endTime" placeholder="结束时间">
          <el-option
            v-for="item in endTimeList"
            :key="item.时间"
            :label="item.时间"
            :value="item.时间"
          >
          </el-option>
        </el-select>
      </div>
    </div>
<div class="TimeDiv" style="text-align: center;">
  <el-button type="primary" style="width: 86%" @click="goBack"
        >确 定</el-button
      >
    </div>
    <div class="DateDiv" id="tagTime">
      <el-tag
        style="
          width: 46%;
          margin-left: 2%;
          margin-right: 2%;
          text-align: center;
        "
        v-for="(item, index) in timeTagList"
        :key="index"
        :type="item.type"
        effect="dark"
      >
        {{ item.name }}
        {{ item.illustrate }}
      </el-tag>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import eventBus from '@/eventBus.js';
import MyTools from '../../assets/js/MyTools.js';
import { formatDate } from '@/assets/js/date.js'
export default {
  data () {
    return {
      VID: '',
      ID: '',
      form: {
        date: formatDate(new Date(), 'yyyy-MM-dd'),
        startTime: '',
        endTime: '',
      },
      startTimeList: [],
      endTimeList: [],
      timeTagList: [],

    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.name === "ConferenceRoomReservation") {
      next((vm) => {
        vm.ID = from.params.ID
        vm.VID = from.params.VID
        vm.form.date = formatDate(new Date(), 'yyyy-MM-dd')
        vm.form.startTime = ''
        vm.form.endTime = ''
        if (from.params.date) {
          vm.form.date = from.params.date

          if (from.params.startTime) {
            vm.form.startTime = from.params.startTime
            vm.form.endTime = from.params.endTime
            vm.getEndTimeList();
          }
        }
        vm.getMeetingTimeInfo();
        vm.getStartTimeList();
      })
    } else {
      next()
    }
  },
  beforeRouteLeave (to, from, next) {
    this.ID = ''
    this.form.date = ''
    this.form.startTime = ''
    this.form.endTime = ''
    next()
  },
  // beforeRouteLeave (to, from, next) { // 仅适用于本页面不作为H5着陆页的情况
  //   var skuShow = true
  //   if (this.form.date === '') {
  //     this.$message.warning('请选择预订日期');
  //     skuShow = false
  //   }else
  //   if (this.form.startTime === '') {
  //     this.$message.warning('请选择开始时间');
  //     skuShow = false
  //   }else
  //   if (this.form.endTime === '') {
  //     this.$message.warning('请选择结束时间');
  //     skuShow = false
  //   }

  //   if (!skuShow) {
  //     this.$store.commit('SET_SKU_SHOW', false)
  //     next(false)
  //   } else {
  //     from.params.date = this.form.date;
  //     from.params.startTime = this.form.startTime;
  //     from.params.endTime = this.form.endTime;
  //     next()
  //   }
  // },
  mounted () {
    var height = MyTools.getWid_Hei().height - 5
    setTimeout(() => {
      var tagTime = document.getElementById('tagTime')
      tagTime.style.height = height + 'rem';
    }, 500);
  },
  methods: {
    goBack () {
      var skuShow = true
      if (this.form.date === '') {
        this.$message.warning('请选择预订日期');
        skuShow = false
      } else if (this.form.startTime === '') {
        this.$message.warning('请选择开始时间');
        skuShow = false
      } else if (this.form.endTime === '') {
        this.$message.warning('请选择结束时间');
        skuShow = false
      }
      if (skuShow) {
        this.$route.params.date = this.form.date;
        this.$route.params.startTime = this.form.startTime;
        this.$route.params.endTime = this.form.endTime;
        this.$router.back();
      }
    },
    changeDate () {
      this.getMeetingTimeInfo();
      this.getStartTimeList();
      this.form.startTime = ''
      this.form.endTime = ''
    },
    changeStartTime () {
      this.form.endTime = ''
      this.getEndTimeList();
    },
    async getStartTimeList () {
      const { data } = await this.$Http.get('ConferenceRoom/GetMeetingApplyTimeInfo?OrderID=0&Type=0&BeginTime=&RoomID=' + this.ID + '&Date=' + this.form.date + '&VID=' + this.VID)
      this.startTimeList = data
    },
    async getEndTimeList () {
      // this.form.endTime = ''
      const { data } = await this.$Http.get('ConferenceRoom/GetMeetingApplyTimeInfo?OrderID=0&RoomID=' + this.ID + '&Date=' + this.form.date + '&VID=' + this.VID + '&Type=1&BeginTime=' + this.form.startTime)
      this.endTimeList = data
    },
    async getMeetingTimeInfo () {
      var url = 'ConferenceRoom/GetMeetingTimeInfo?OrderID=0&RoomID=' + this.ID + '&Date=' + this.form.date + '&VID=' + this.VID 
      const { data } = await this.$Http.get(url)
      this.originalData = []
      data.forEach(element => {
        if (element.时间段.slice(-2) === '00') {
          element.name = element.时间段 + ' - ' +
            element.时间段.substr(0, 3) + '30'
        } else if (element.时间段.slice(-2) === '30') {
          element.name = element.时间段 + ' - ' +
            element.时间段.substring(0, 1) + (parseInt(element.时间段[1]) + 1).toString() + ':00'
        }

        if (element.预订状态 === '0') {
          element.type = 'info'
          element.illustrate = '已预订'
        } else if (element.预订状态 === '-1') {
          element.type = 'danger'
          element.illustrate = '不可预订'
        } else if (element.预订状态 === '1') {
          element.type = ''
        }
        this.originalData.push(element)
      });
      this.timeTagList = this.originalData
    },
  }
}
</script>

<style lang="scss" scoped>
.submitButtom {
  position: fixed;
  bottom: 0.2rem;
  width: 100%;
  height: 1.5rem;
}
.TimeDiv {
  font-size: 25px;
  padding-top: 0.2rem;
  width: 100%;
  height: 1.5rem;
}
.DateDiv {
  margin-left: 5%;
  padding-bottom: 200px;
  width: 90%;
  overflow: auto;
  height: 0rem;
}
/* 隐藏滚动条 */
.DateDiv::-webkit-scrollbar {
  display: none;
}
</style>
